Day 14 - 將 COMPANY 後台儲存資料提取後，送至 About Us 前台渲染畫面 - 文字編輯器資料渲染 - ASP.NET Web Forms C#

13th鐵人賽 c# asp.net webforms

龜人

團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社

2021-09-28 00:55:05

1046 瀏覽

分享至

=x= 🌵 COMPANY - About Us 前台頁面後端功能製作。

COMPANY 頁面資料介紹 :

📌 在 COMPANY 頁面的側邊欄，可以發現是獨立對應 company.html 及 company1.html 頁面，而我們在後台製作時也都把要用到的資料都準備好了，在這裡只要把資料從資料庫撈出來就好，資料區塊分類如果忘記，可以直接參考昨天的拆解。

🧠 這個 About Us 頁面的內容在後台是用 WYSIWYG Editor 存下來的內容是 HTML 編碼，然後使用 HtmlEncode() 方法將特殊符號改成 字元實體參照 (character entity reference) 存起來，最後存在資料庫的內容就會變成下面這樣 :

🌵 記得後面要使用時要用HtmlDecode() 轉回 HTML 標籤內容。
👀 特殊符號編碼 : 字元實體（character entities）

COMPANY 頁面 - About Us 內容後端實作 :

1. 新增 company.aspx 將原始 company.html 的 `<head>` 及 `<body>` 內的內容分別複製到 .aspx檔案中。

2. 刪除與 VIEWSTATE 有關的程式碼。

3. 使用取代功能將 .html 都取代為 .aspx。

👀 以上操作可參考 Day 9 文章內容。

4. 從昨天的後台製作可以知道 About Us 內容因為是用 HTML 文字編輯器將內容用 HTML 語法存下來，所以我們直接用 Literal 控制項來接收就可以，參考如下

🌵 這邊刪除的 code 不用保留。

5. 後端 company.aspx.cs 的 Page_Load 事件加入以下方法

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack) {
        loadContent();
    }
}

6. 建立讀取內容 loadContent(); 方法

private void loadContent()
{
    //從資料庫取資料
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sqlCountry = "SELECT TOP 1 aboutUsHtml FROM Company";
    SqlCommand command= new SqlCommand(sqlCountry, connection);
    connection.Open();
    SqlDataReader reader = command.ExecuteReader();
    if (reader.Read()) {
        //渲染畫面
        Literal1.Text = HttpUtility.HtmlDecode(reader["aboutUsHtml"].ToString());
    }
    connection.Close();
}

🌵 記得要使用 HttpUtility.HtmlDecode() 轉成 HTML 標籤內容。
👀 微軟官方資源 : HttpUtility.HtmlEncode 方法